<template>
	<div>
		<CommonCard title="累计用户数" :value="value">
			<template>
				<v-chart :options="getOptions()" />
			</template>
			<template slot="footer">
				日同比
				<span class="emphasis">349.26%</span>
				<span class="decrease"></span>

				月同比
				<span class="emphasis" style="margin-right: 10px;">461.58%</span>
				<span class="increase"></span>
			</template>
		</CommonCard>
	</div>
</template>
<script>
import CommonCard from '../CommonCard/index';
export default {
	name: 'TotalUser',
	components: {
		CommonCard,
	},
	data() {
		return {
			value: `${this.thousands('4492931')}`,
		};
	},
	methods: {
		getOptions() {
			return {
				xAxis: {
					show: false,
				},
				yAxis: {
					type: 'category', // 横排
					show: false,
				},
				grid: {
					left: 0,
					right: 0,
					top: 0,
					bottom: 0,
				},
				series: [
					{
						stack: '总量', // 名字一样会合并成一条线
						type: 'bar',
						data: [80],
						barWidth: 10,
						itemStyle: {
							color: '#45c946',
						},
					},
					{
						stack: '总量',
						type: 'bar',
						barWidth: 10,
						data: [100],
						itemStyle: {
							color: '#eee',
						},
					},
					{
						type: 'custom', // 自定义
						stack: '总量',
						data: [80], // 位置
						renderItem: (params, api) => {
							const value = api.value(0); // 获取位置
							const endPoint = api.coord([value, 0]); // 获取坐标点
							return {
								type: 'group',
								position: endPoint, // 坐标点
								children: [
									{
										type: 'path', // svg
										shape: {
											d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z', // svg d 图标代码
											x: -5, // 偏移
											y: -20,
											width: 10, // 大小
											height: 10,
											layout: 'cover', // 比例缩放
										},
										style: {
											fill: '#45c946',
										},
									},
									{
										type: 'path',
										shape: {
											d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
											x: -5,
											y: 10,
											width: 10,
											height: 10,
											layout: 'cover',
										},
										style: {
											fill: '#45c946',
										},
									},
								],
							};
						},
					},
				],
			};
		},
	},
};
</script>
